<template>
  <div class="content">
    <div class="kqysDiv">
      <TitleVue :name="'库区要素'" />
      <div class="kqysContent">
        <div class="itemDiv" v-for="(item, index) in kqysList" :key="index">
          <div class="leftDiv">
            <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <div class="rightDiv">
            <p>{{ item.content1 }}{{ item.val }}{{ item.unit }}</p>
            <div>
              <span :class="showList.includes(item.content2) ? 'active' : ''" @click="changePage(item.content2)">{{ item.content2 }}</span>
              <span :class="showList.includes(item.content3) ? 'active' : ''" @click="changePage(item.content3)">{{ item.content3 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="xyysDiv">
      <TitleVue :name="'下游要素'" />
      <div class="xyysContent">
        <Title2Vue :name="'威胁对象'" />
        <div class="content1Div">
          <div class="oneItem">
            <img src="@/assets/img/common/下游河道.png" />
            <div class="rightDiv">
              <p>下游河道</p>
              <p>{{ xyhdTotal }}条</p>
            </div>
          </div>
          <div class="oneItem">
            <img src="@/assets/img/common/水工建筑.png" />
            <div class="rightDiv">
              <p>水工建筑</p>
              <p>{{ sgjzTotal }}座</p>
            </div>
          </div>
        </div>
        <div class="content2Div">
          <div class="itemDiv" v-for="(item, index) in xyysList" :key="index">
            <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
            <div class="rightDiv">
              <p>{{ item.name }}</p>
              <p>{{ item.val }}{{ item.unit }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showJzDialog" class="mask-layer">
      <div class="dialog">
        <div class="closeDiv">
          <i class="el-icon-close" @click="closeJzList"></i>
        </div>
        <el-table :data="jzList" style="width: 100%">
          <el-table-column prop="sysk" label="所属水库" align="center"> </el-table-column>
          <el-table-column prop="jzname" label="界桩名称" align="center"> </el-table-column>
          <el-table-column prop="jd" label="经度" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="wd" label="纬度" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="hzb" label="横坐标" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="zyb" label="纵坐标" show-overflow-tooltip align="center"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="showYjfbDialog" class="mask-layer">
      <div class="dialog2">
        <div class="closeDiv">
          <i class="el-icon-close" @click="closeYjfbList"></i>
        </div>
        <el-table :data="yjfbList" style="width: 100%">
          <el-table-column prop="tzswqj" label="特征水位区间" align="center"> </el-table-column>
          <el-table-column prop="val" label="淤积量（m³）" align="center"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="showSzDialog" class="mask-layer">
      <div class="dialog3">
        <div class="closeDiv">
          <i class="el-icon-close" @click="closeSzList"></i>
        </div>
        <div class="contentss">
          <div class="leftDiv">
            <PieCharts4 :pieData="pieData" :legendShow="true" />
          </div>
          <div class="rightDiv">
            <el-table :data="szList" style="width: 100%">
              <el-table-column prop="sysk" label="所属水库" align="center"> </el-table-column>
              <el-table-column prop="nf" label="年份" align="center"> </el-table-column>
              <el-table-column prop="sz" label="水质" align="center"> </el-table-column>
              <el-table-column prop="cbxm" label="超标项目" align="center"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import Title2Vue from '../common/title2Vue.vue'
import PieCharts4 from '../echarts/pieCharts4.vue'

export default {
  name: 'QysLeft',
  components: {
    TitleVue,
    Title2Vue,
    PieCharts4
  },
  data() {
    return {
      kqysList: [
        {
          name: '流域信息',
          content1: '流域面积：',
          val: 223,
          unit: 'km²',
          content2: '·所在流域：黄河流域',
          content3: '·所在河流：白马河'
        },
        {
          name: '电子界桩',
          content1: '界桩数量：',
          val: 5,
          unit: '个',
          content2: '·查看界桩范围',
          content3: '·查看界桩列表'
        },
        {
          name: '水下地形',
          content1: '淤积库容：',
          val: 1260,
          unit: '万m³',
          content2: '·查看地形渲染',
          content3: '·查看淤积分布'
        },
        {
          name: '水质监测',
          content1: '达标率：',
          val: 98,
          unit: '%',
          content2: '·Ⅰ类：60% ·Ⅱ类：32% ·Ⅲ类：6%'
        }
      ],
      xyhdTotal: 4,
      sgjzTotal: 3,
      xyysList: [
        {
          name: '乡镇',
          val: 3,
          unit: '个'
        },
        {
          name: '村庄',
          val: 5,
          unit: '个'
        },
        {
          name: '房屋',
          val: 7500,
          unit: '栋'
        },
        {
          name: '人口',
          val: 2.7,
          unit: '万'
        },
        {
          name: '道路',
          val: 3,
          unit: '条'
        },
        {
          name: '耕地',
          val: 1.86,
          unit: '万亩'
        }
      ],
      showList: [],
      showJzDialog: false,
      jzList: [
        {
          sysk: '蔡庄水库',
          jzname: '界桩1',
          hzb: 4197984.8,
          zyb: 408139.42,
          jd: 112.955433112,
          wd: 37.909656427
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩2',
          hzb: 4197916.5,
          zyb: 408260.08,
          jd: 112.956813642,
          wd: 37.909053353
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩3',
          hzb: 4197870.06,
          zyb: 408301.55,
          jd: 112.957291035,
          wd: 37.908639203
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩4',
          hzb: 4197845.85,
          zyb: 408454.08,
          jd: 112.959028273,
          wd: 37.908436472
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩5',
          hzb: 4197825.42,
          zyb: 408542.67,
          jd: 112.960038071,
          wd: 37.908261345
        }
      ],
      showYjfbDialog: false,
      yjfbList: [
        {
          tzswqj: '死水位以下',
          val: 13.45
        },
        {
          tzswqj: '死水位-汛限水位',
          val: 107.08
        },
        {
          tzswqj: '汛限水位-设计水位',
          val: 634.71
        },
        {
          tzswqj: '设计水位-校核水位',
          val: 586.68
        }
      ],
      showSzDialog: false,
      szList: [
        {
          sysk: '蔡庄水库',
          nf: '2024',
          sz: '良好',
          cbxm: '否'
        }
      ],
      pieData: [
        { value: 40, name: 'Ⅰ类地区' },
        { value: 38, name: 'Ⅱ类地区' },
        { value: 32, name: 'Ⅲ类地区' },
        { value: 30, name: 'Ⅳ类地区' },
        { value: 32, name: 'Ⅴ类地区' },
        { value: 30, name: '劣Ⅴ类地区' }
      ]
    }
  },
  mounted() {},
  methods: {
    changePage(val) {
      if (val == '·查看界桩列表') {
        this.showList.push(val)
        this.showJzDialog = true
      } else if (val == '·查看界桩范围') {
        if (this.showList.includes(val)) {
          let index = this.showList.indexOf(val)
          if (index > -1) {
            this.showList.splice(index, 1)
          }
          this.$store.commit('changeMapJz', false)
        } else {
          this.showList.push(val)
          this.$store.commit('changeMapJz', true)
        }
      } else if (val == '·查看淤积分布') {
        this.showList.push(val)
        this.showYjfbDialog = true
      } else if (val.indexOf('Ⅱ类') > -1) {
        this.showList.push(val)
        this.showSzDialog = true
      } else if (val == '·查看地形渲染') {
        if (this.showList.includes(val)) {
          let index = this.showList.indexOf(val)
          if (index > -1) {
            this.showList.splice(index, 1)
          }
          this.$store.commit('changeMapDxxr', false)
        } else {
          this.showList.push(val)
          this.$store.commit('changeMapDxxr', true)
        }
      }
    },
    closeJzList() {
      this.showJzDialog = false
      let index = this.showList.indexOf('·查看界桩列表')
      if (index > -1) {
        this.showList.splice(index, 1)
      }
    },
    closeYjfbList() {
      this.showYjfbDialog = false
      let index = this.showList.indexOf('·查看淤积分布')
      if (index > -1) {
        this.showList.splice(index, 1)
      }
    },
    closeSzList() {
      this.showSzDialog = false
      let index = this.showList.indexOf('·Ⅰ类：60% ·Ⅱ类：32% ·Ⅲ类：6%')
      if (index > -1) {
        this.showList.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .mask-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-bottom: 0px solid transparent;
    }
    ::v-deep .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      background-color: transparent;
    }
    ::v-deep .el-table tr {
      background: #031d31;
      color: #ccc;
      font-family: Regular;
      border: none !important;
    }
    ::v-deep.el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      background: #031d31;
      color: #ccc;
      font-family: Regular;
      border: none !important;
    }
    ::v-deep .el-table th.el-table__cell.is-leaf {
      border: none !important;
    }
    ::v-deep .el-table th.el-table__cell {
      background: #031d31;
      color: #ccc;
      font-family: Regular;
      border: none;
    }
    ::v-deep .el-table__inner-wrapper::before {
      background-color: transparent;
    }
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background: #031d31 !important;
    }
    .dialog {
      position: absolute;
      top: 30vh;
      left: 30vw;
      background-color: #07182b;
      width: 40vw;
      height: auto;
      z-index: 999;
      color: #ffffff;
      padding: 1vh 1vw 2vh 1vw;
      box-sizing: border-box;
      .closeDiv {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
        .el-icon-close {
          font-size: 2.2vh;
          line-height: 3vh;
          cursor: pointer;
        }
      }
    }
    .dialog2 {
      position: absolute;
      top: 30vh;
      left: 35vw;
      background-color: #07182b;
      width: 30vw;
      height: auto;
      z-index: 999;
      color: #ffffff;
      padding: 1vh 1vw 2vh 1vw;
      box-sizing: border-box;
      .closeDiv {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
        .el-icon-close {
          font-size: 2.2vh;
          line-height: 3vh;
          cursor: pointer;
        }
      }
    }
    .dialog3 {
      position: absolute;
      top: 30vh;
      left: 30vw;
      background-color: #07182b;
      width: 40vw;
      height: 40vh;
      z-index: 999;
      color: #ffffff;
      padding: 1vh 1vw 2vh 1vw;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .closeDiv {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
        .el-icon-close {
          font-size: 2.2vh;
          line-height: 3vh;
          cursor: pointer;
        }
      }
      .contentss {
        flex: 1;
        display: flex;
        .leftDiv {
          width: 50%;
          height: 100%;
        }
        .rightDiv {
          flex: 1;
        }
      }
    }
  }

  .kqysDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;

    .kqysContent {
      display: flex;
      flex-direction: column;
      padding: 0 3vh;
      box-sizing: border-box;
      .itemDiv {
        width: 100%;
        height: auto;
        display: flex;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #c5d1df;
        margin-bottom: 1vh;
        .leftDiv {
          width: auto;
          margin-right: 0.5vw;
          display: flex;
          flex-direction: column;
          img {
            margin-right: 0.3vw;
          }
          p {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 1.9vh;
            color: #ffffff;
          }
        }
        .rightDiv {
          width: auto;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          p:nth-child(1) {
            width: 80%;
            font-size: 1.9vh;
            margin-bottom: 5px;
            padding: 5px;
            color: #ffffff;
            box-sizing: border-box;
            background: linear-gradient(to right, #0565a7, transparent);
          }
          div:nth-child(2) {
            span {
              margin-right: 5px;
              cursor: pointer;
            }
            .active {
              color: #00ffff;
            }
          }
        }
      }
    }
  }
  .xyysDiv {
    flex: 1;
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    .xyysContent {
      display: flex;
      flex-direction: column;
      padding: 1vh 1.5vh;
      box-sizing: border-box;
      .content1Div {
        display: flex;
        justify-content: space-between;
        padding: 0 2vh;
        box-sizing: border-box;
        .oneItem {
          display: flex;
          .rightDiv {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 1.5vh;
            color: #00ffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            p:nth-child(2) {
              width: 4vw;
              font-size: 1.7vh;
              padding-left: 10px;
              background: linear-gradient(to right, #0565a7, transparent);
            }
          }
        }
      }
      .content2Div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 3vh;
        .itemDiv {
          width: 30%;
          display: flex;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.5vh;
          color: #00ffff;
          margin-bottom: 1.5vh;
          .rightDiv {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
